<template>
  <div class="users-box">
    <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%"
        empty-text="当前没有用户"
        header-align="center"
        max-height="60vh"
        height="60vh"
    >
      <el-table-column
          header-align="center"
          type="index"
          align="center"
          label="序号"
          :index="1"
          width="80"
          max-height="75vh"
          height="75vh"
      />
      <el-table-column
          prop="name"
          label="姓名"
          width="150"
          align="center"
      />
      <el-table-column
          prop="root"
          label="当前权限等级"
          width="150"
          align="center"
      >
        <template #default="{row}">
          <el-tag
            type=""
            v-if="row.root === 0"
          >
            总经理
          </el-tag>
          <el-tag
            type=""
            v-else-if="row.root === 1"
          >
            部门负责人
          </el-tag>
          <el-tag
            type=""
            v-else-if="row.root === 2"
          >
            普通用户
          </el-tag>
          <el-tag
            type=""
            v-else-if="row.root === 3"
          >
            普通用户
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="root"
        label="所属部门"
        width="150"
        align="center"
      >
        <template #default="{row}">
          <div v-if="row.role === 1">
            <el-tag type="success">
            总经办
            </el-tag>
          </div>
          <div v-if="row.role === 2">
            <el-tag type="success">
            测绘部外业
            </el-tag>
          </div>
          <div v-if="row.role === 3">
            <el-tag type="success">
            测绘部内业
            </el-tag>
          </div>
          <div v-if="row.role === 4">
            <el-tag type="success">
            技术部
            </el-tag>
          </div>
          <div v-if="row.role === 5">
            <el-tag type="success">
            研发部
            </el-tag>
          </div>
          <div v-if="row.role === 6">
            <el-tag type="success">
            行政部
            </el-tag>
          </div>
          <div v-if="row.role === 7">
            <el-tag type="success">
            设计部
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          align="center"
      >
        <template #default="{ row }">
          <el-button round size="small" type="warning" @click="showDia(row)">修改权限</el-button>
          <el-button round size="small" type="primary" @click="showUpdate(row)">修改部门</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--修改权限-->
    <el-dialog
        v-model="rootVisible"
        title="请选择新权限"
        width="25%"
        :before-close="handleClose"
    >
      <el-select v-model="newValue" class="m-2" size="large" placeholder="请选择新权限">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editUserRoot">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>

    <!--修改部门-->
    <el-dialog
        v-model="roleVisible"
        title="请选择新部门"
        width="25%"
        :before-close="handleCloseRole"
    >
      <el-select v-model="newRole" class="m-2" size="large" placeholder="请选择新部门">
        <el-option
            v-for="item in roleOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeRole">取消</el-button>
        <el-button type="primary" @click="editRole">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ElMessage, ElTable, ElTableColumn, ElTag} from "element-plus";
import {onMounted, reactive} from "vue";
import {getUsers, editUserRoots, updateUserRole} from "@/api/index.js"
import axios from "axios";
import {ref} from "vue-demi";
import {useRouter} from "vue-router";
import message from "view-ui-plus/src/components/message";
import emitter from "@/lib/eventBus"



let tableData = ref([])
const router = useRouter()
let dialogVisible = ref(false)

const roleVisible = ref(false)
const rootVisible = ref(false)
//权限列表
const options = [
  {
    value: 0,
    label: '总经理',
  },{
    value: 1,
    label: '部门负责人',
  },{
    value: 2,
    label: '普通用户',
  },
]
// 部门列表
const roleOptions = [
  {
    value: 1,
    label: '总经办',
  },{
    value: 2,
    label: '测绘部外业',
  },{
    value: 3,
    label: '测绘部内业',
  },{
    value: 4,
    label: '技术部',
  },{
    value: 5,
    label: '研发部',
  },{
    value: 6,
    label: '行政部',
  },{
    label: '设计部',
    value: '7',
  },
]


//权限newvalue
let newValue = ref()
// 当前节点
let node = ref()
// 当前用户节点

const newRole = ref()

onMounted(()=>{
  emitter.emit('updateManageMenu','/users')
  getUserList()
})

//获取用户列表
const getUserList = async ()=>{
  try {
    const {data:res} = await getUsers()
    if(res.code === 200){
      tableData.value = res.data
    } else {
      return ElMessage({
        message:'获取用户列表失败',
        type:'error'
      })
    }
  } catch (e) {
    console.log(e)
  }
}


// show edit dialog
const showDia = (row)=>{
  rootVisible.value = true
  node.value = row.id
}
const editUserRoot = async ()=>{
  try {
    if(!newValue.value){
      return ElMessage({
        message:'请选择权限',
        type:'error'
      })
    }
    if(!localStorage.getItem('syhyDocManSys')){
      rootVisible.value = false
      router.push('/login')
      return ElMessage({
        message:'请先登录',
        type:'warning'
      })
    }
    let obj = JSON.parse(localStorage.getItem('syhyDocManSys'))
    const data = {
      userId : obj.id,
      targetId : node.value,
      root : newValue.value
    }
    const {data:res} = await editUserRoots(data)
    if(res.code === 400 ){
      rootVisible.value = false
      return ElMessage({
        message:'修改失败',
        type:'error'
      })
    } else if(res.code === 401 ){
      rootVisible.value = false
      return ElMessage({
        message:'该用户不存在,刷新后重试',
        type:'error'
      })
    } else if(res.code === 402) {
      rootVisible.value = false
      return ElMessage({
        message: '修改后的权限等级不能与之前一致',
        type: 'error'
      })
    } else if(res.code === 403) {
      rootVisible.value = false
      return ElMessage({
        message: '请选择参数',
        type: 'error'
      })
    } else if (res.code === 200){
      rootVisible.value = false
      await getUserList()
      return ElMessage({
        message: '修改成功!',
        type: 'success'
      })
    }
  } catch (e) {
    console.log(e)
  }
}

const handleClose = () => {
  getUserList()
  node.value = null
  rootVisible.value = false
  newValue.value = null
}

const showUpdate = (row) => {
  roleVisible.value = true
  node.value = row.id
}

const editRole = async () => {
  try {
    const {data:res} = await updateUserRole({
      userId:node.value,
      newRole:newRole.value
    })
    if(res.code === 200){
      getUserList()
      roleVisible.value = false
      newRole.value = null
      return ElMessage({
        message:'操作成功!',
        type:'success'
      })
    } else if (res.code === 402) {
      getUserList()
      return ElMessage({
        message:'无效用户',
        type:'warning'
      })
    } else {
      getUserList()
      console.log(res)
      return ElMessage({
        message:'修改失败!',
        type:'warning'
      })
    }
  } catch (e) {
    console.log(e)
  }
}

const handleCloseRole = () => {
  getUserList()
  roleVisible.value = false
  newRole.value = null
  node.value = null
}

const closeRole = () => {
  getUserList()
  roleVisible.value = false
  newRole.value = null
  node.value = null
}
</script>

<style scoped lang="less">
.el-table{
  padding: 1vh 1vw;
}
.users-box{
  width: 48%;
  height: 90%;
  padding: 5vh;
}
:deep(.el-table__inner-wrapper){
  height: 55vh !important;
}

:deep(.el-dialog__header ){
  text-align: left !important;
  font-weight: 600 !important;
}
</style>
